<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Js 对象测试二</title>
    <script>
        /*
        Js 中所有的事物都是对象： 字符串,数值，数组，函数.. 允许自定义的对象 
        */
        function testString(){
            var message = "Hello De Long";
            var x = message.length;
            var y = message.toUpperCase()
            console.log(x,y)
        }
        
        /*
        Js 对象的初始化方法
        没有 继承等概念 但是有构造器  
        对象的属性 并不需要在class 中事先说明 
        */
        function objInt(){
            var person = new Object()
            person.firstname = "Yang"
            person.lastname = "DeLong"
            person.age = 25;
            person.eyecolor = "blue"
            console.log(person)
        }

         //  和 面向对象的中 的字典差不多 
        var personTwo = {
                firstname: "Yang",
                lastname: "Delong",
                age: 25,
                eyecolor: "blue"
        };

        function perssonThree(firstname, lastname, age, eyecolor) {
            this.firstname = firstname;
            this.lastname = lastname;
            this.age = age;
            this.eyecolor = eyecolor;
        }
        
        function testPersonThree(){
            var perThree = new perssonThree("Yang", "DeLong", 18, "blue");
            console.log(perThree)
            // document.write(perThree.firstname + "is" + perThree.eyecolor + perThree.age + ".Yeares old")
            // 对象的属性可以赋值
        }

        /*
        把方法添加到 JavaScript 对象
        方法只不过是附加在对象上的函数。
        在构造器函数内部定义对象的方法：
        */
        function personFour(firstname,lastname,age,eyecolor){
            this.firstname=firstname;
            this.lastname=lastname;
            this.age=age;
            this.eyecolor=eyecolor;

            this.changeName=changeName;
            function changeName(name){
                this.lastname=name;
            }           
        }
        
        function testPersonFour(){
            var fourPerson = new personFour("Steve","Jobs",56,"green");
            fourPerson.changeName("Ball")
            console.log(fourPerson.lastname)
        }
        
        /*
        JavaScript 类
        JavaScript 是面向对象的语言，但 JavaScript 不使用类。
        在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
        JavaScript 基于 prototype，而不是基于类的。 prototype 原型，标准，模范
        Js 中可以使用 for..in 循环来遍历对象的属性 
        */
        function testForIn(){
            var fivePerson = {
                fname:"Bill",
                lname:"Gates",
                age:20
            }
            var txt = "";
            var key = "";
            // 这里我们做下拓展  x 应该是 key  
            for (x in fivePerson){
                txt = txt + fivePerson[x];
                key = x + key;
            }
            //  注意这个 顺序 改变了
            console.log("the person is:" + txt + "key is:" + key)
        }


    </script>
</head>
<body>
    <button onclick="testString()">测试字符串</button>
    <button onclick="objInt()">初始化对象</button>
    <button onclick="testPersonThree()">测试三个人</button>
    <button onclick="testPersonFour()">测试第四个人</button>
    <button onclick="testForIn()">测试第五个人</button>
</body>
</html>